<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的demo</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message" />
    <p>原始信息: {{message}}</p>
    <p>反转后的信息: {{reverseMessage()}}</p>
    <button @click="showMessage">控制台打印函数的值和计算属性的值</button>

    <!--
    功能:
        之所以使用计算属性, 是因为官方说法: 在模板中放入太多的逻辑会让模板过重且难以维护.
    说明:
        1. 下面的例子就是说明了这个反例.
        2. 确实发现, 没有放到计算属性中那样醒目, 并且可以更加的利于维护.
        3. 所谓计算属性, 就是: app1.reverseMessage的值取决于app1.message的值.
    -->
    <p>原始信息: {{message}}</p>
    <p>反转后的信息(使用计算属性实现): {{message.split('').reverse().join('')}}</p>

    <!--
    功能:
        使用methods属性可以实现和计算属性的区别说明.
    说明:
        1. 当前页面在浏览器打开之后, 打开console, 重复刷新页面, 会发现每次都只打印`反转函数执行了`.
        2. 而`计算属性执行了`会在console中修改`app1.message`的值后执行.
        3. 也就是说: 计算属性存在缓存, 只有依赖的原始值发生改变时才会执行; 但是methods不存在缓存, 每次都会必然执行.
            - 所以如果, 如果处理的是一个大数组, 则使用计算属性可以提高性能.
        4. 官方说法:
            - 计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
            - 相比而言，每当重新渲染的时候，method 调用总会执行函数。
            - 我们为什么需要缓存？假设我们有一个重要的计算属性 A ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用 method 替代。
    -->
    <p>反转后的信息(使用methods实现): {{reverseMessage()}}</p>
    <p>使用计算属性(使用计算属性实现): {{reverseMessageUseComputed}}</p>
    <button @click="getNow">获取当前计算属性取得的当前时间</button>
</div>
</body>
<script>

    let app1 = new Vue({
        el: '#app',
        data: {
            message: 'hello it`s me',
            methodsCount: 0,
            computedCount: 0
        },
        methods: {
            reverseMessage: function () {
                console.log('反转函数执行了');
                return this.message.split('').reverse().join('');
            },
            showMessage: function () {
                console.log(this.reverseMessageUseComputed, ' ', this.reverseMessage());
            },
            getNow: function () {
                console.log(this.now);
            }
        },
        computed: {
            reverseMessageUseComputed: function () {
                console.log('计算属性执行了');
                return this.message.split('').reverse().join('');
            },
            now: function () {
                return Date.now();
            }
        }
    });

</script>
</html>